<template>
  <f7-page
    no-toolbar
    no-navbar
    no-swipeback
    login-screen
    class="backgroundColor"
  >
    <f7-login-screen-title class="titleColor">My Music</f7-login-screen-title>
    <f7-list form>
      <f7-list-input
        label="用户名"
        type="text"
        placeholder="Your username"
        :value="username"
        @input="username = $event.target.value"
      ></f7-list-input>
      <f7-list-input
        label="密码"
        type="password"
        placeholder="Your password"
        :value="password"
        @input="password = $event.target.value"
      ></f7-list-input>
    </f7-list>
    <f7-list>
      <f7-list-button @click="signIn">登录</f7-list-button>
      <f7-list-button @click="register">注册</f7-list-button>
      <f7-block-footer class="titleSubColor"
        >欢迎使用<br />{{ msg }}</f7-block-footer
      >
    </f7-list>
  </f7-page>
</template>

<script>
import { login, register,auth } from '@/api/login.js'
import { getToken,setToken } from '@/utils/auth.js'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      username: '',
      password: '',
      msg: '',
    }
  },
  methods: {
    ...mapActions({
      setUserInfo: 'setUserInfo',
    }),
    signIn() {
      const self = this
      const app = self.$f7
      const router = self.$f7router
      let loginInfo = {
        username: self.username,
        password: self.password,
      }

      login(loginInfo.username, loginInfo.password)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.msg = res.message
            setToken(res.data.token)
            
            this.$store.dispatch('setUserInfo', res.data)
            this.$f7ready((f7) => {
              f7.views.main.router.navigate('/home/')
            })
          } else {
            this.msg = res.message
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    register() {
      let registerInfo = {
        userName: this.username,
        password: this.password,
      }
      register(registerInfo)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            console.log(res.code)
            this.$f7ready((f7) => {
              var toastTop = f7.toast.create({
                text: '注册成功',
                position: 'top',
                closeTimeout: 1500,
              })
              toastTop.open()
            })
            this.signIn()
          } else {
            if (!this.username || !this.password){
              this.msg = '请在上方输入要注册的用户名和密码'
            }
            else {
              this.msg = res.message
            }
            
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted(){
    if (getToken()){
      auth()
        .then((res) => {
          console.log(res)
          if (res.code === 200 && res.data.userInfo.userName) {
            
            let authInfo = {
              userid:res.data.userInfo.id,
              username:res.data.userInfo.userName,
            }
            for (let key in res.data.userInfo){
              authInfo[key] = res.data.userInfo[key];
            }
            this.$store.dispatch('setUserInfo', authInfo)
            this.$f7ready((f7) => {
              f7.views.main.router.navigate('/home/')
            })
          } else {
            this.msg = res.message
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .login-screen-page {
  $backgroundColor: #d9e7e7;
  /deep/ .page-content {
    background-color: $backgroundColor;
  }
}
.dark .login-screen-page {
  $backgroundColor: #212121;
  /deep/ .page-content {
    background-color: $backgroundColor;
  }
}
.dark .list {
  $spanColor: #ffffff;
  $spanSubColor: #f0f0f0;
  /deep/ .item-label {
    color: $spanColor;
  }
  /deep/ input {
    color: $spanColor;
    &::-webkit-input-placeholder {
      color: $spanSubColor !important;
    }
  }
}
</style>
